<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="__STATIC__/wechat/css/bootstrap.min.css" rel="stylesheet">
    <link href="__STATIC__/wechat/css/menu.css" rel="stylesheet">
</head>
<body>
<div class="content" style="width:900px;margin:0 auto;">
    <div id="app-menu">
        <!-- 预览窗 -->
        <div class="weixin-preview">
            <div class="weixin-hd">
                <div class="weixin-title">{{weixinTitle}}</div>
            </div>
            <div class="weixin-bd">
                <ul class="weixin-menu" id="weixin-menu" >
                    <li v-for="(btn,i) in menu.button" class="menu-item" :class="{current:selectedMenuIndex===i&&selectedMenuLevel()==1}" @click="selectedMenu(i,$event)">
                        <div class="menu-item-title">
                            <i class="icon_menu_dot"></i>
                            <span>{{ btn.name }}</span>
                        </div>
                        <ul class="weixin-sub-menu" v-show="selectedMenuIndex===i">
                            <li v-for="(sub,i2) in btn.sub_button" class="menu-sub-item" :class="{current:selectedSubMenuIndex===i2&&selectedMenuLevel()==2}"  @click.stop="selectedSubMenu(i2,$event)">
                                <div class="menu-item-title">
                                    <span>{{sub.name}}</span>
                                </div>
                            </li>
                            <li v-if="btn.sub_button.length<5" class="menu-sub-item" @click.stop="addMenu(2)">
                                <div class="menu-item-title">
                                    <i class="icon14_menu_add"></i>
                                </div>
                            </li>
                            <i class="menu-arrow arrow_out"></i>
                            <i class="menu-arrow arrow_in"></i>
                        </ul>
                    </li>
                    <li class="menu-item" v-if="menu.button.length<3" @click="addMenu(1)"> <i class="icon14_menu_add"></i></li>
                </ul>
            </div>
        </div>
        <!-- 主菜单 -->
        <div class="weixin-menu-detail" v-if="selectedMenuLevel()==1">
            <div class="menu-input-group" style="border-bottom: 2px #e8e8e8 solid;">
                <div class="menu-name">{{menu.button[selectedMenuIndex].name}}</div>
                <div class="menu-del" @click="delMenu">删除菜单</div>
            </div>
            <div class="menu-input-group">
                <div class="menu-label">菜单名称</div>
                <div class="menu-input">
                    <input type="text" name="name" placeholder="请输入菜单名称" class="menu-input-text" v-model="menu.button[selectedMenuIndex].name" @input="checkMenuName(menu.button[selectedMenuIndex].name)">
                    <p class="menu-tips" style="color:#e15f63" v-show="menuNameBounds">字数超过上限</p>
                    <p class="menu-tips">字数不超过4个汉字或8个字母</p>
                </div>
            </div>
            <template v-if="menu.button[selectedMenuIndex].sub_button.length==0">
                <div class="menu-input-group">
                    <div class="menu-label">菜单内容</div>
                    <div class="menu-input">
                        <select v-model="menu.button[selectedMenuIndex].type" name="type" class="menu-input-text">
                            <option value="view">跳转网页(view)</option>
                            <option value="media_id">发送消息(media_id)</option>
                            <!--<option value="view_limited">跳转公众号图文消息链接(view_limited)</option>-->
                            <option value="miniprogram">打开指定小程序(miniprogram)</option>
                            <option value="click">自定义点击事件(click)</option>
                            <option value="scancode_push">扫码上传消息(scancode_push)</option>
                            <option value="scancode_waitmsg">扫码提示下发(scancode_waitmsg)</option>
                            <option value="pic_sysphoto">系统相机拍照(pic_sysphoto)</option>
                            <option value="pic_photo_or_album">弹出拍照或者相册(pic_photo_or_album)</option>
                            <option value="pic_weixin">弹出微信相册(pic_weixin)</option>
                            <option value="location_select">弹出地理位置选择器(location_select)</option>
                        </select>
                    </div>
                </div>
                <div class="menu-content" v-if="selectedMenuType()==1">
                    <div class="menu-input-group">
                        <p class="menu-tips">订阅者点击该子菜单会跳到以下链接</p>
                        <div class="menu-label">页面地址</div>
                        <div class="menu-input">
                            <input type="text" placeholder="" class="menu-input-text" v-model="menu.button[selectedMenuIndex].url">
                            <p class="menu-tips cursor" @click="selectNewsUrl">从公众号图文消息中选择</p>
                        </div>
                    </div>
                </div>
                <div class="menu-msg-content" v-else-if="selectedMenuType()==2">
                    <div class="menu-msg-head"><i class="icon_msg_sender"></i>图文消息</div>
                    <div class="menu-msg-panel">
                        <div class="menu-msg-select" v-if="menu.button[selectedMenuIndex].media_id==''||menu.button[selectedMenuIndex].media_id==undefined" @click="selectMaterialId">
                            <i class="icon36_common add_gray"></i>
                            <strong>从素材库中选择</strong>
                        </div>
                        <div class="menu-msg-select" v-else>
                            <div class="menu-msg-title"><i class="icon_msg_sender"></i>{{material.title}}</div>
                            <a :href="material.url" target="_blank" class="btn btn-sm btn-info">查看</a>
                            <div class="btn btn-sm btn-danger" @click="delMaterialId">删除</div>
                        </div>
                    </div>
                </div>
                <div class="menu-content" v-else-if="selectedMenuType()==3">
                    <div class="menu-input-group">
                        <p class="menu-tips">用于消息接口推送，不超过128字节</p>
                        <div class="menu-label">菜单KEY值</div>
                        <div class="menu-input">
                            <input type="text" placeholder="" class="menu-input-text" v-model="menu.button[selectedMenuIndex].key">
                        </div>
                    </div>
                </div>
                <div class="menu-content" v-else-if="selectedMenuType()==4">
                    <div class="menu-input-group">
                        <p class="menu-tips">订阅者点击该子菜单会跳到以下小程序</p>
                        <div class="menu-label">小程序APPID</div>
                        <div class="menu-input">
                            <input type="text" placeholder="小程序的appid（仅认证公众号可配置）" class="menu-input-text" v-model="menu.button[selectedMenuIndex].appid">
                        </div>
                    </div>
                    <div class="menu-input-group">
                        <div class="menu-label">小程序路径</div>
                        <div class="menu-input">
                            <input type="text" placeholder="小程序的页面路径 pages/Index/index" class="menu-input-text" v-model="menu.button[selectedMenuIndex].pagepath">
                        </div>
                    </div>
                    <div class="menu-input-group">
                        <div class="menu-label">备用网页</div>
                        <div class="menu-input">
                            <input type="text" placeholder="" class="menu-input-text" v-model="menu.button[selectedMenuIndex].url">
                            <p class="menu-tips">旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。</p>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <!-- 子菜单 -->
        <div class="weixin-menu-detail" v-if="selectedMenuLevel()==2">
            <div class="menu-input-group" style="border-bottom: 2px #e8e8e8 solid;">
                <div class="menu-name">{{menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].name}}</div>
                <div class="menu-del" @click="delMenu">删除子菜单</div>
            </div>
            <div class="menu-input-group">
                <div class="menu-label">子菜单名称</div>
                <div class="menu-input">
                    <input type="text" placeholder="请输入子菜单名称" class="menu-input-text" v-model="menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].name" @input="checkMenuName(menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].name)">
                    <p class="menu-tips" style="color:#e15f63" v-show="menuNameBounds">字数超过上限</p>
                    <p class="menu-tips">字数不超过8个汉字或16个字母</p>
                </div>
            </div>
            <div class="menu-input-group">
                <div class="menu-label">子菜单内容</div>
                <div class="menu-input">
                    <select v-model="menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].type" name="type" class="menu-input-text">
                        <option value="view">跳转网页(view)</option>
                        <option value="media_id">发送消息(media_id)</option>
                        <!--<option value="view_limited">跳转公众号图文消息链接(view_limited)</option>-->
                        <option value="miniprogram">打开指定小程序(miniprogram)</option>
                        <option value="click">自定义点击事件(click)</option>
                        <option value="scancode_push">扫码上传消息(scancode_push)</option>
                        <option value="scancode_waitmsg">扫码提示下发(scancode_waitmsg)</option>
                        <option value="pic_sysphoto">系统相机拍照(pic_sysphoto)</option>
                        <option value="pic_photo_or_album">弹出拍照或者相册(pic_photo_or_album)</option>
                        <option value="pic_weixin">弹出微信相册(pic_weixin)</option>
                        <option value="location_select">弹出地理位置选择器(location_select)</option>
                    </select>
                </div>
            </div>
            <div class="menu-content" v-if="selectedMenuType()==1">
                <div class="menu-input-group">
                    <p class="menu-tips">订阅者点击该子菜单会跳到以下链接</p>
                    <div class="menu-label">页面地址</div>
                    <div class="menu-input">
                        <input type="text" placeholder="" class="menu-input-text" v-model="menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].url">
                        <p class="menu-tips cursor" @click="selectNewsUrl">从公众号图文消息中选择</p>
                    </div>
                </div>
            </div>
            <div class="menu-msg-content" v-else-if="selectedMenuType()==2">
                <div class="menu-msg-head"><i class="icon_msg_sender"></i>图文消息</div>
                <div class="menu-msg-panel">
                    <div class="menu-msg-select" v-if="menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].media_id==''||menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].media_id==undefined" @click="selectMaterialId">
                        <i class="icon36_common add_gray"></i>
                        <strong>从素材库中选择</strong>
                    </div>
                    <div class="menu-msg-select" v-else>
                        <i class="icon_msg_sender"></i>{{material.title}}
                        <a :href="material.url" target="_blank" class="btn btn-sm btn-info">查看</a>
                        <div class="btn btn-sm btn-danger" @click="delMaterialId">删除</div>
                    </div>
                </div>
            </div>
            <div class="menu-content" v-else-if="selectedMenuType()==3">
                <div class="menu-input-group">
                    <p class="menu-tips">用于消息接口推送，不超过128字节</p>
                    <div class="menu-label">菜单KEY值</div>
                    <div class="menu-input">
                        <input type="text" placeholder="" class="menu-input-text" v-model="menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].key">
                    </div>
                </div>
            </div>
            <div class="menu-content" v-else-if="selectedMenuType()==4">
                <div class="menu-input-group">
                    <p class="menu-tips">订阅者点击该子菜单会跳到以下小程序</p>
                    <div class="menu-label">小程序APPID</div>
                    <div class="menu-input">
                        <input type="text" placeholder="小程序的appid（仅认证公众号可配置）" class="menu-input-text" v-model="menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].appid">
                    </div>
                </div>
                <div class="menu-input-group">
                    <div class="menu-label">小程序路径</div>
                    <div class="menu-input">
                        <input type="text" placeholder="小程序的页面路径 pages/Index/index" class="menu-input-text" v-model="menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].pagepath">
                    </div>
                </div>
                <div class="menu-input-group">
                    <div class="menu-label">备用网页</div>
                    <div class="menu-input">
                        <input type="text" placeholder="" class="menu-input-text" v-model="menu.button[selectedMenuIndex].sub_button[selectedSubMenuIndex].url">
                        <p class="menu-tips">旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="weixin-btn-group">
        <div id="btn-create" class="btn btn-success">发布</div>
        <div id="btn-clear" class="btn btn-danger">清空</div>
    </div>
</div>

<!-- 弹出层 -->
<div id="news-list" style="display: none;">
    <table id="news-table" class="table table-bordered">
        <thead>
        <tr>
            <th>图文标题</th>
            <th width="130">日期</th>
            <th width="130">操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<div id="material-list" style="display: none;">
    <table id="material-table" class="table table-responsive table-bordered">
        <thead>
        <tr>
            <th>素材名称</th>
            <th width="130">操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<script src="__STATIC__/js/jquery-1.12.3.min.js"></script>
<script src="__STATIC__/js/vue.js"></script>
<script src="__STATIC__/js/template-web.js"></script>
<script src="__STATIC__/js/layer/layer.js"></script>
<script src="__STATIC__/js/weixin-menu.js"></script>

<script id="material-tpl" type="text/html">
    {{each item v k}}
    <tr>
        <td>
            <ul>
                {{each v.content.news_item v2 k2}}
                <li><a href="{{v2.url}}" target="_blank">{{k2+1}}. {{v2.title}}</a></li>
                {{/each}}
            </ul>
        </td>
        <td>
            <button onclick="app.setMaterialId('{{v.media_id}}','{{v.content.news_item[0].title}}','{{v.content.news_item[0].url}}')" class="btn btn-primary">选择</button>
        </td>
    </tr>
    {{/each}}
</script>

<script id="news-tpl" type="text/html">
    {{each item v k}}
    <tr>
        <td>{{v.title}}</td>
        <td>{{v.update_time}}</td>
        <td>
            <a href="{{v.url}}" target="_blank" class="btn btn-info">查看</a>
            <button onclick="app.setNewsUrl('{{v.url}}')" class="btn btn-primary btn-material-id">选择</button>
        </td>
    </tr>
    {{/each}}
</script>
</body>
</html>
